<template>
  <scroll-view scroll-y class="memberDetail" @scrolltolower="handleNextPage">
    <nav-bar title="会员详情" class="nav-bar" />
    <view class="content" :style="{ top: navBarHeight + 'px' }">
      <div class="card" v-if="!memberDetail">
        <u-skeleton
          :loading="true"
          avatar
          rows="1"
          avatarSize="100rpx"
        ></u-skeleton>
      </div>
      <view class="card" v-if="memberDetail">
        <view class="lef"
          ><image :src="memberDetail.headImg" mode=""></image
        ></view>
        <view class="rig">
          <view class="top">
            <view class="name">{{ memberDetail.customerName }}</view>
            <view class="phone">{{ memberDetail.phone }}</view>
          </view>
          <view class="btm">加入时间：{{ memberDetail.registerTime }}</view>
        </view>
      </view>
      <scroll-tab
        class="scroll-tab"
        :tabData="tabData"
        @tabMsg="tabMsg"
      ></scroll-tab>
      <view v-if="tabActive === 'balance' && memberDetail" class="balance-box">
        <view>
          <view>￥{{ memberDetail.totalBalance | formatCurrency }}</view>
          <view class="txt">剩余总额</view>
        </view>
        <view>
          <view>￥{{ memberDetail.scBalance | formatCurrency }}</view>
          <view class="txt">充值总额</view>
        </view>
        <view>
          <view>￥{{ memberDetail.giftBalance | formatCurrency }}</view>
          <view class="txt">赠送总额</view>
        </view>
      </view>

      <block v-if="list.length > 0">
        <view v-if="tabActive === 'balance'" class="balance-ul">
          <view
            @click="jumpBalanceDetail(item)"
            v-for="item in list"
            :key="item.id"
            class="li"
          >
            <view class="lef">
              <view>{{ BALANCE_RECORD_TYPE[item.recordType] }}</view>
              <view class="time">{{ item.createTime }}</view>
            </view>
            <view class="rig"
              >{{ item.balanceFee < 0 ? "-" : "" }}￥{{
                item.balanceFee | formatMoneyCurrency
              }}</view
            >
          </view>
        </view>
        <view v-if="tabActive === 'transaction'" class="balance-ul">
          <view
            @click="jumpOrderDetail(item.orderNo)"
            v-for="item in list"
            :key="item.id"
            class="li"
          >
            <view class="lef">
              <view>订单号：{{ item.orderNo }}</view>
              <view class="time"
                >{{ DELIVERY_METHOD_TEXT[item.deliveryType] }}
                {{ item.payDeadline }}</view
              >
            </view>
            <view class="rig">
              <view class="text">余额支付</view>
              <view class="price"
                >￥{{ item.payFee | formatMoneyCurrency }}</view
              >
            </view>
          </view>
        </view>
      </block>

      <view class="content" v-else>
        <xh-empty />
      </view>

      <view class="blank-box"></view>
    </view>
  </scroll-view>
</template>

<script>
import scrollTab from "@/components/pageComponents/sp-order/scroll-tab";
import {
  getMemberBalanceRecord,
  getMemberDealRecord,
  getMemberDetail,
} from "@/service/api/sp-member/member";
import { BALANCE_RECORD_TYPE } from "@/pages/sp-member/const/member";
import { DELIVERY_METHOD_TEXT } from "@/const/order";
export default {
  components: { scrollTab },
  data() {
    return {
      navBarHeight: 60,
      BALANCE_RECORD_TYPE,
      DELIVERY_METHOD_TEXT,

      tabActive: "balance",
      tabData: [
        {
          name: "余额记录",
          value: "balance",
          icon: "",
        },
        {
          name: "交易记录",
          value: "transaction",
          icon: "",
        },
      ],

      memberDetail: null,
      pageConfig: {
        pageNum: 1,
        pageSize: 10,
      },
      list: [],
      hasNextPage: false,
    };
  },
  filters: {
    // 金钱格式化
    formatMoneyCurrency(num) {
      if (!num) return "0.00";
      num = Number(num) / 100;
      num = num.toString().replace(/\$|,/g, "");
      if (isNaN(num)) num = "0";
      let sign = Number(num) === (num = Math.abs(num));
      num = Math.floor(num * 100 + 0.50000000001);
      let cents = num % 100;
      num = Math.floor(num / 100).toString();
      if (cents < 10) cents = "0" + cents;
      for (let i = 0; i < Math.floor((num.length - (1 + i)) / 3); i++)
        num =
          num.substring(0, num.length - (4 * i + 3)) +
          "," +
          num.substring(num.length - (4 * i + 3));
      return num + "." + cents;
    },
  },
  created() {},
  mounted() {
    this.fetchMemberDetail();
    this.getList(true);
    const navBar = this.uGetRect(".nav-bar");
    const search = this.uGetRect(".search");
    Promise.all([navBar, search]).then((res) => {
      this.navBarHeight = res[0].height;
      this.searchHeight = res[1].height;
    });
  },
  methods: {
    uGetRect(selector, all) {
      return new Promise((resolve) => {
        uni
          .createSelectorQuery()
          .in(this)
          [all ? "selectAll" : "select"](selector)
          .boundingClientRect((rect) => {
            if (all && Array.isArray(rect) && rect.length) {
              resolve(rect);
            }
            if (!all && rect) {
              resolve(rect);
            }
          })
          .exec();
      });
    },
    tabMsg(val) {
      this.tabActive = val.value;
      this.$nextTick(() => {
        this.getList(true);
      });
    },
    // 跳转余额详情
    jumpBalanceDetail(e) {
      uni.navigateTo({
        url: `/pages/sp-member/pages/balanceDetail/index`,
        success: (res) => {
          res.eventChannel.emit("fetchData", {
            ...e,
          });
        },
      });
      this.$Router.push({
        name: "balanceDetail",
        params: {
          id: e.id,
        },
        query: {
          ...e,
        },
      });
    },
    // 跳转交易详情
    jumpOrderDetail(e) {
      this.$Router.push({
        name: "orderDetail",
        params: {
          orderCode: e,
        },
      });
    },
    async fetchMemberDetail() {
      const res = await getMemberDetail({ customerId: this.$Route.query.id });
      if (res) {
        this.memberDetail = res;
      }
    },
    getList(isClear = false) {
      if (isClear) {
        this.list = [];
        this.pageConfig.pageNum = 1;
      }
      if (this.tabActive === "balance") {
        this.fetchMemberBalanceRecord();
      }
      if (this.tabActive === "transaction") {
        this.fetchMemberDealRecord();
      }
    },
    //余额记录
    async fetchMemberBalanceRecord() {
      const res = await getMemberBalanceRecord({
        customerId: this.$Route.query.id,
        ...this.pageConfig,
      });
      if (res) {
        this.list = [...this.list, ...res.list];
        this.hasNextPage = res?.hasNextPage;
      }
    },
    //交易记录
    async fetchMemberDealRecord() {
      const res = await getMemberDealRecord({
        customerId: this.$Route.query.id,
        ...this.pageConfig,
      });
      if (res) {
        this.list = [...this.list, ...res.list];
        this.hasNextPage = res?.hasNextPage;
      }
    },
    handleNextPage() {
      if (!this.hasNextPage) return;
      this.pageConfig.pageNum += 1;
      this.getList();
    },
  },
};
</script>
<style>
page {
  background-color: #f7f7f7;
}
</style>
<style lang="scss" scoped>
.memberDetail {
  height: 100vh;
  overflow: hidden;
  overflow-y: scroll;
}
.content {
  .card {
    width: 686rpx;
    background: #ffffff;
    border-radius: 12rpx;
    margin: 0 auto;
    margin-top: 19rpx;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    padding: 30rpx 26rpx;
    box-sizing: border-box;
    .lef {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
      overflow: hidden;
      margin-right: 26rpx;
      image {
        width: 100%;
        height: 100%;
      }
    }
    .rig {
      flex: 2;
      .top {
        display: flex;
        justify-items: flex-start;
        font-size: 29rpx;
        color: #131313;
        .name {
          font-weight: bold;
        }
        .phone {
          font-weight: 500;
          margin-left: 42rpx;
        }
      }
      .btm {
        display: flex;
        justify-items: flex-start;
        font-size: 26rpx;
        font-weight: 500;
        color: #131313;
        opacity: 0.7;
        margin-top: 20rpx;
      }
    }
  }
  .balance-box {
    width: 686rpx;
    background: #ffffff;
    border-radius: 12rpx;
    margin: 0 auto;
    margin-top: 19rpx;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    padding: 40rpx 50rpx;
    box-sizing: border-box;
    font-size: 29rpx;
    font-weight: bold;
    color: #000000;
    text-align: center;
    .txt {
      font-size: 27rpx;
      font-weight: 500;
      color: #888888;
    }
  }
  .balance-ul {
    width: 686rpx;
    background: #ffffff;
    border-radius: 12rpx;
    margin: 0 auto;
    margin-top: 19rpx;
    overflow: hidden;
    .li {
      border-bottom: 1rpx solid #f3f3f3;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30rpx 22rpx;
      box-sizing: border-box;
      font-weight: 500;
      .lef {
        font-size: 29rpx;
        color: #181818;
        .time {
          font-size: 27rpx;
          color: #888888;
          margin-top: 24rpx;
        }
      }
      .rig {
        font-size: 29rpx;
        color: #181818;
        .text {
          text-align: right;
        }
        .price {
          text-align: right;
        }
      }
    }
  }
}

.blank-box {
  width: 686rpx;
  height: 100rpx;
}
</style>
